﻿/**
 * 轮播图
 * 1.当页面加载完毕，获取要操作的节点
 * 2.根据数据动态生成轮播图以及控制按钮
 * 3.当前按钮样式变化(on),其他恢复原来样式
 * 4.开启自动轮播
 * 5.为包含轮播的div添加一个onmouseover事件停止定时器和onmouseout事件开始轮播
 */

//获取元素
var oBanner = document.getElementById('banner');
var oPic = document.getElementById('pic');
var oImg = document.getElementById('banner-img');
var oPrve = document.getElementById('prve');
var oNext = document.getElementById('next');
var oSpan = document.getElementById('span');
var oP = document.getElementById('p');
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
var oText = document.getElementById('word');

//数组存放在图片的地址，数量（模拟数据）
var data = [{
        arrUrl: "images/1.jpg",
        arrTitle: "图片1",
        arrText: "图片1介绍文字片段"
    },
    {
        arrUrl: "images/2.jpg",
        arrTitle: "图片2",
        arrText: "图片2介绍文字片段"
    },
    {
        arrUrl: "images/3.jpg",
        arrTitle: "图片3",
        arrText: "图片3介绍文字片段"
    },
    {
        arrUrl: "images/4.jpg",
        arrTitle: "图片4",
        arrText: "图片4介绍文字片段"
    }
]

var num = 0;

//动态加载数据
for (var i = 0; i < data.length; i++) {
    //往ul里面动态添加li
    oUl.innerHTML += '<li></li>';
}

//  点击图片切换
function fnTab(num) {
    oImg.src = data[num]['arrUrl'] //改图片的src
    oSpan.innerHTML = 1 + num + '/' + data.length; //图片数量字符串拼接  '1/4' 的形式.
    oP.innerHTML = data[num]['arrTitle']; //图片标题
    oText.innerHTML = data[num]['arrText']; //图片介绍文字
    for (var i = 0; i < aLi.length; i++) //切换小圆点样式
    {
        aLi[i].className = '';
    }
    aLi[num].className = 'on';
}
fnTab(0);

//点击小圆点
for (var i = 0; i < aLi.length; i++) {
    aLi[i].index = i; //自定义属性，索引值
    aLi[i].onclick = function () {
        num = this.index;
        fnTab(num);
    }

}

//定时器自动轮播
var timer = null;

function autoPlay() {
    timer = setInterval(function () {
        num++;
        num %= data.length;
        fnTab(num);
    }, 2000);
}

// autoPlay();
setTimeout(autoPlay, 2000);

//鼠标移入清除定时器
oBanner.onmouseover = function () {
    clearInterval(timer);
}

//鼠标移出
oBanner.onmouseout = autoPlay;